* {
  box-sizing: border-box;
}

body {
  display: flex; /* 使用Flexbox布局 */
  min-height: 100vh; /* 确保body至少占据整个视口高度 */
  margin: 0;
  font-family: Arial, sans-serif;
}

.sidebar {
  width: 200px; /* 侧边栏宽度 */
  background-color: #333; /* 背景颜色 */
  color: white; /* 文字颜色 */
  position: fixed; /* 固定定位 */
  height: 100vh; /* 全高，跟随视口高度 */
  padding: 20px; /* 内边距 */
  overflow-y: auto; /* 侧边栏内部可滚动 */
}

.sidebar ul {
  list-style-type: none; /* 去除列表样式 */
  padding: 0;
}

.sidebar a {
  text-decoration: none; /* 去除链接下划线 */
  color: inherit; /* 链接颜色继承自父元素 */
  display: block; /* 将链接变为块级元素，方便点击 */
  padding: 10px 0; /* 上下内边距 */
}

.sidebar a:hover {
  background-color: #555; /* 鼠标悬停时的颜色变化 */
}

.content {
  margin-left: 200px; /* 为侧边栏留出空间 */
  padding: 20px;
  flex: 1;
}
